import { GetTargetTree } from '@/common/types';
import { SvgIcon } from '@/components/icon';
import { CaretRightOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import React, { useEffect, useMemo } from 'react';

interface Props {
  treeData: GetTargetTree[];
  selectData?: GetTargetTree;
  handleClickUserTree: (treeData: GetTargetTree, type?: boolean) => void;
  expandedKeys: string[];
  defaultValue: any[];
}

interface TreeNodeProps {
  treeData: GetTargetTree;
  selectData?: GetTargetTree;
  level?: number;
  handleClickUserTree: (treeData: GetTargetTree, type?: boolean) => void;
  expandedKeys: string[];
  defaultValue: any[];
}

const TreeNode = ({
  treeData,
  level = 0,
  handleClickUserTree,
  selectData,
  expandedKeys,
  defaultValue,
}: TreeNodeProps) => {
  const iconName = () => {
    if (treeData.level === 0) {
      return 'ai-classa';
    }
    if (treeData.level === 1) {
      return 'ai-classb';
    }

    if (treeData.level === 2) {
      return 'ai-calssc';
    }

    return 'ai-classd';
  };

  const selectStatus = useMemo(() => selectData?.target_id === treeData.target_id, [selectData]);
  const isExpanded = useMemo(
    () => expandedKeys.includes(treeData.target_id),
    [expandedKeys, treeData.target_id],
  );

  const knowStatus = useMemo(() => treeData.resources.length > 0, [treeData]);

  const qaStatus = useMemo(
    () => defaultValue.some((item) => item.id === treeData.target_id),
    [defaultValue, treeData],
  );

  return (
    <>
      <div
        className={`flex h-10 cursor-pointer items-center justify-between rounded-xl ${
          selectStatus ? 'bg-@brand-color-light' : ''
        }`}
        style={{
          paddingLeft: `${level * 16}px`,
        }}
        onClick={() => handleClickUserTree(treeData)}
        data-user-id={treeData.target_id}
      >
        <div
          className={`flex items-center gap-1 ${
            selectStatus ? ' text-@brand-color' : 'text-[#1d1d1d]'
          } `}
        >
          <div className="flex h-5 w-5 items-center justify-center">
            {treeData.childrens.length > 0 && (
              <CaretRightOutlined
                rotate={isExpanded ? 90 : 0}
                onClick={(e) => {
                  e.stopPropagation();
                  handleClickUserTree(treeData, true);
                }}
              />
            )}
          </div>
          <SvgIcon icon={iconName()} size="24px" />
          <span>{treeData.target_name}</span>
        </div>
        <div className="flex items-center gap-2 pr-2">
          <Tooltip title={qaStatus || knowStatus ? '可与应用问答' : '不可与应用问答'}>
            <div className="flex items-center justify-between">
              <SvgIcon
                icon={qaStatus || knowStatus ? 'qa' : 'qa-not'}
                size={20}
                // color={`${'#D6DBE3'}`}
              />
            </div>
          </Tooltip>
          <Tooltip title={knowStatus ? '已配置知识库权限' : '未配置知识库权限'}>
            <div className="flex items-center justify-between">
              <SvgIcon
                icon={knowStatus ? 'konw-base' : 'konw-base-not'}
                size={20}
                // color={`${'#D6DBE3'}`}
              />
            </div>
          </Tooltip>
        </div>
      </div>
      {isExpanded &&
        treeData.childrens &&
        treeData.childrens.map((item) => (
          <TreeNode
            treeData={item}
            level={level + 1}
            key={item.target_id}
            handleClickUserTree={handleClickUserTree}
            selectData={selectData}
            expandedKeys={expandedKeys}
            defaultValue={defaultValue}
          />
        ))}
    </>
  );
};

const LeftTreeUI = ({
  treeData,
  handleClickUserTree,
  selectData,
  expandedKeys,
  defaultValue,
}: Props) => {
  return (
    <>
      {treeData.map((item) => (
        <TreeNode
          treeData={item}
          key={item.target_id}
          handleClickUserTree={handleClickUserTree}
          selectData={selectData}
          expandedKeys={expandedKeys}
          defaultValue={defaultValue}
        />
      ))}
    </>
  );
};

export default LeftTreeUI;
